import React from 'react';
import { Menu } from 'antd'
import {
  PieChartOutlined,
  UserOutlined,
} from '@ant-design/icons';
const { SubMenu } = Menu;
const Index = (props) => {
  const { routes } = props

  const handleSelect = ({ item, key, keyPath, selectedKeys, domEvent }) => {
    props.history.push({ pathname: key })
  }
  return (
    <div>
       <Menu theme="dark" defaultSelectedKeys={[props.location.pathname]} defaultOpenKeys={[props.location.pathname.split('/').slice(0,-1).join('/')]} mode="inline" onSelect={ handleSelect }>
            {
              routes.length && routes.map((v, i) => {
                return (
                  v.children 
                    ? <SubMenu key={v.path} icon={<UserOutlined />} title={v.title}>
                    {
                      v.children.map((v, i ) => {
                        return <Menu.Item key={v.path} icon={<PieChartOutlined />}>{ v.title }</Menu.Item>
                      })
                    }
                  </SubMenu>
                    : <Menu.Item key={v.path} icon={<PieChartOutlined />}>{ v.title }</Menu.Item>
                )
              })
            }
            {/* <Menu.Item key="1" icon={<PieChartOutlined />}>
              Option 1
            </Menu.Item>
            <Menu.Item key="2" icon={<DesktopOutlined />}>
              Option 2
            </Menu.Item>
            <SubMenu key="sub1" icon={<UserOutlined />} title="User">
              <Menu.Item key="3">Tom</Menu.Item>
              <Menu.Item key="4">Bill</Menu.Item>
              <Menu.Item key="5">Alex</Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
              <Menu.Item key="6">Team 1</Menu.Item>
              <Menu.Item key="8">Team 2</Menu.Item>
            </SubMenu>
            <Menu.Item key="9" icon={<FileOutlined />}>
              Files
            </Menu.Item> */}
          </Menu>
    </div>
  );
}

export default Index;
